<template>
    <div>
        <el-dialog
            title="新增运营账号"
            :visible.sync="dialogVisible"
            width="580px">
            <el-form ref="form" :model="form" label-width="120px" size="small">
                <el-form-item label="用户名:" prop="username"
                              :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' },]">
                    <el-input v-model="form.username" placeholder="请输入用户名" style="width: 343px;"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel" size="small">取 消</el-button>
                <el-button type="primary" @click="onSubmit" size="small">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {addUser, setRole} from "@/admin/api/admin/backStage/account/account"

export default {
    data() {
        return {
            dialogVisible: false,
            form: {
                username: ""
            },
        }
    },
    mounted() {

    },
    components: {},
    methods: {
        cancel() {
            this.dialogVisible = false;
        },
        showDialog(e, row) {
            this.powerId = row.id

            this.getRole()
            this.dialogVisible = !this.dialogVisible
        },
        onSubmit() {
            this.$refs["form"].validate((valid) => {
                    if (valid) {
                        addUser(this.form).then(res => {
                                if (res.code == 200) {
                                    this.dialogVisible = false;
                                    this.$message({
                                        message: res.message,
                                        type: "success",
                                    });
                                    this.form = {}
                                    this.$parent.getOperatorList();
                                } else {
                                    this.$message({
                                        message: res.message,
                                        type: "error",
                                    });
                                }
                            }
                        )
                    } else {
                        this.$message.warning('请输入正确的信息')
                    }
                }
            )
        },
        getRole() {
            setRole(this.powerId).then(res => {
                if (res.code == 200) {
                    // this.dialogVisible = false;
                    // this.$message({
                    //     message: res.message,
                    //     type: "success",
                    // });
                    // this.$parent.getOperatorList();

                } else {
                    this.$message({
                        message: res.message,
                        type: "error",
                    });
                }
            })
        }
    },
}
</script>

<style lang="less" scoped>

.flex-container {
    display: flex;
    align-items: center; /* 垂直居中 */
    margin-top: 10px;
}
</style>
